<template>
  <div class="system-user-container layout-padding">
    <el-card shadow="hover" class="layout-padding-auto">
      <div class="system-user-search mb15">
        <el-form ref="searchFormRef" :model="searchForm" inline>
          <el-form-item label="搜索" prop="blurry">
            <el-input v-model="searchForm.blurry" placeholder="请输入"> </el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="default" type="primary" @click="refresh">
              <el-icon>
                <ele-Search></ele-Search>
              </el-icon>
              查询
            </el-button>
            <el-button size="default" @click="onRest">
              <el-icon>
                <ele-RefreshRight></ele-RefreshRight>
              </el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
        <div class="table-tool-bar">
          <el-button
            size="default"
            type="primary"
            @click="handleAdd()"
          >
            <el-icon>
              <ele-Plus></ele-Plus>
            </el-icon>
            新增用户
          </el-button>
        </div>
      </div>
      <el-table :data="tableData.list" v-loading="loading" border style="width: 100%">
        <el-table-column prop="name" label="姓名" width="100" fixed="left"></el-table-column>
        <el-table-column prop="roles[0].description" label="角色" width="100"></el-table-column>
        <el-table-column prop="username" label="登录名" width="100"></el-table-column>
        <el-table-column prop="mobile" label="手机号" width="120"></el-table-column>
        <el-table-column prop="email" label="邮箱" show-overflow-tooltip></el-table-column>
        <el-table-column prop="gender" label="性别" show-overflow-tooltip>
          <template #default="scope">
            {{ GenderLabel[scope.row.gender] }}
          </template>
        </el-table-column>
        <el-table-column prop="totalBonus" label="总积分" width="200" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            {{ UserStatusLabel[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="160"></el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template #default="scope">
            <el-button
              size="small"
              text
              type="primary"
              @click="handleReset(scope.row)"
              >重置密码</el-button
            >
            <el-button
              size="small"
              text
              type="primary"
              @click="handleEdit(scope.row)"
              >修改</el-button
            >
            <el-button
              size="small"
              text
              type="primary"
              @click="handleBonus(scope.row)"
              >积分</el-button
            >
            <el-button
              size="small"
              text
              type="primary"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <CommonPagination :pagination="pagination" :total="tableData.total"></CommonPagination>
    </el-card>
    <UserDialog ref="userDialogRef" @refresh="refresh"></UserDialog>
    <BonusDialog ref="bonusDialogRef" @refresh="refresh"></BonusDialog>
  </div>
</template>

<script setup lang="ts" name="systemUser">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { readAllUser, deleteUser, resetPassword } from '/@/api/user';
import { useTable } from '/@/hooks/use-table';
import CommonPagination from '/@/components/common-pagination/index.vue';
import { User } from '/@/models';
import { DialogType } from '/@/constants/dialog-type';
import { ButtonPermission, GenderLabel, UserStatusLabel } from '/@/constants';
import { confirm } from '/@/utils/confirm';

// 引入组件
const UserDialog = defineAsyncComponent(() => import('/@/views/system/user/dialog.vue'));
const BonusDialog = defineAsyncComponent(() => import('/@/views/system/user/bonus-dialog.vue'));


// 定义变量内容
const userDialogRef = ref<InstanceType<typeof UserDialog>>();
const bonusDialogRef = ref<InstanceType<typeof BonusDialog>>();

const searchFormRef = ref<FormInstance>();
const searchForm = reactive({
  blurry: ''
});

const { tableData, loading, pagination, refresh } = useTable<User>(({ page, pageSize }) =>
  readAllUser({ page, pageSize, ...searchForm }).then((data) => {
    return {
      total: data?.total,
      list: data?.list
    };
  })
);

const onRest = () => {
  searchFormRef.value?.resetFields();
  refresh();
};

// 打开新增字典弹窗
const handleAdd = () => {
  userDialogRef.value?.openDialog(DialogType.CREATE);
};

// 打开修改字典弹窗
const handleEdit = (row: User) => {
  userDialogRef.value?.openDialog(DialogType.EDIT, row);
};

const handleBonus = (row: User) => {
  bonusDialogRef.value?.openDialog(row);
}

// 删除字典
const handleDelete = (row: User) => {
  confirm(
    async () => {
      await deleteUser(row.id);
      ElMessage.success('删除成功');
      refresh();
    }
  );
};

const handleReset = async (row: User) => {
  await resetPassword(row.id);
  ElMessage.success('重置成功');
  refresh();
};
</script>

<style scoped lang="scss">
.system-user-container {
  :deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    .el-table {
      flex: 1;
    }
  }
}
</style>
